<template>
  <div>
    <div class="search">
      <input type="text" v-model="keywords" v-color="" placeholder="输入城市或拼音" class="search-input">
    </div>

    <div class="seach-content" v-show="keywords" ref="wapll">
      <ul>
        <li class="swarch-item" v-for="item in list" :key="item.id">{{item.name}}</li>
       <li class="swarch-item" v-show="hasnoData">没有匹配到数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
    export default {
        name: "Search",
      props:{
        cities:Object
      },
      data(){
          return{
            keywords:'',
            list:[],//定义城市数组
            timer:null
          }
      },
      computed:{
        hasnoData(){
          return !this.list.length
        }
      },
      watch:{//监听
        // keywords(){
        //   if (this.timer){
        //     clearTimeout(this.timer)
        //   }
        //   this.timer=setTimeout(()=>{
        //     const reult=[];
        //     for (let i in this.cities){
        //       this.cities[i].forEach((value)=>{
        //         if (value.spell.indexOf(this.keywords)>-1 || value.name.indexOf(this.keywords)>-1){
        //           reult.push(value)
        //         }
        //       })
        //     }
        //     this.list=reult;
        //     console.log(this.list)
        //   },100)
        // }
        keywords(){//搜索关键字
          if(this.timer){
            clearTimeout(this.timer)
          }
          this.timer=setTimeout(()=>{
            const arr=[];
            for (let i in this.cities){
              this.cities[i].forEach((value)=>{
                if (value.spell.indexOf(this.keywords)>-1 ||value.name.indexOf(this.keywords)>-1) {
                  arr.push(value)
                }
              })
            }
            this.list=arr
          },100)
        }
      },
      mounted(){
          this.scroll=new Bscroll(this.$refs.wapll)//实现城市的列表滚动
      },
    }


</script>

<style lang="stylus" scoped>
   .search{
     overflow hidden;
     height .36rem;
     background #00bcd4;
     padding 0 0.1rem;
      .search-input{
        width 100%;
        line-height 0.3rem;
        box-sizing border-box;
        border-radius .06rem;
        padding 0 .1rem;
        text-align center;
        color #666;
      }
   }
.seach-content{
  width 100%;
  position absolute;
  top:.76rem;
  left 0;
  bottom 0;
  background #eee;
  z-index 1;
}
  .swarch-item{
    line-height .28rem;
    border-bottom 1px solid #ccc;
    background #fff;
  }
</style>
